<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹幕</title>
        <script src="../jquery-3.1.1.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: #eee;
			}
			#box{
				height:700px;
				width:1000px;
				margin: 0 auto;
				border:1px solid #000000;
				position: relative;
			}
			#main{
				width:100%;
				height:605px;
				position: relative;
				overflow: hidden;
			}
			span{
				position: absolute;
				left:1000px;
				width:200px;
				/*border: 2px solid cyan;*/
				top:0;
			}
			#bottom{
				width:100%;
				height:70px;
				background: #666;
				text-align: center;
				padding-top: 20px;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			#txt{
				width:300px;
				height:40px;
                margin-left: 10px;
                border-radius: 5px;
                outline: none;
                border: none;	
			}
			#btn{
				width:100px;
				height:40px;
                margin-left: 10px;
                border-radius: 5px;
                border: none;
                outline: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="main"></div>
			<div id="bottom">
				<input type="text" id="txt" placeholder="请输入内容" />
				<input type="button" id="btn" value="发送" />
			</div>
		</div>
		

		<script type="text/javascript">
			$(document).ready(function(){
                //字体颜色数组
				var colorArr=["red","green","blue","purple","orange","gray","yellow"];

                //绑定点击事件				
				$("#btn").bind("click",auto);

                //enter键 也可以发送
				document.onkeydown=function(e){
		            if(e.keyCode == 13){
						auto();
		            }
		        };

                //弹幕滚动播放
				function auto(){
                    //获得输入框的值
					var value = $("#txt").val();
					if(value == ''){
						return;
					}
                    //增加span
                    $("#main").append("<span>" + value + "</span>");

                    //随机出现位置
					var height=Math.floor(630*(Math.random()));

                    //随机字体颜色
					var num=Math.floor(colorArr.length*(Math.random()));

                    //更改样式
					$("span:last-child").css({"top":height,"color":colorArr[num],"font-size":"20px"});
                    //从右往左移动
					$("span:last-child").stop().animate({"left":"-200px"},10000,"linear",function(){
                        //动画结束消失
                        $(this).remove();
                    });	
                    //输入框清空
                    $("#txt").val('');			
				};
			});
		</script>
	</body>
</html>